import React, { useEffect } from 'react'
import { StatusBar, ScrollView, View, Text, TouchableOpacity, Platform } from 'react-native'
import { useSelector, useDispatch } from 'react-redux'
import { useNavigation, useIsFocused } from '@react-navigation/native'
import { Image, ListItem } from 'react-native-elements'
import { Button } from 'native-base'

import styles from './styles'
import * as userActions from '@/actions/user'

const rightIcon = require('@/assets/images/icon-right.png')
const iconHistory = require('../../assets/images/icon_history.png')
const iconActivity = require('@/assets/images/icon_activity.png')
const iconContact = require('@/assets/images/icon_contact.png')

const iconCollect = require('@/assets/images/icon_collect.png')
const defaultHeader = require('@/assets/images/default-header.png')

const navList = [
  {
    name: '消息通知',
    url: 'Messages'
  }
]

const nav2List = [
  {
    name: '我的评论',
    url: 'MyComments'
  },
  {
    name: '我提交的',
    url: 'MyFeedbacks'
  }
]

const nav3List = [
  {
    name: '联系客服',
    url: 'ConnectService'
  },
  {
    name: '用户反馈',
    url: 'Feedback'
  },
  {
    name: '系统设置',
    url: 'Setting'
  }
]

const UserCenter = props => {
  const navigation = useNavigation()
  const isFocused = useIsFocused()
  const dispatch = useDispatch()
  const userInfo = useSelector(state => state.user.userInfo)

  useEffect(() => {
    if (isFocused) {
      global.storage.load({ key: 'loginState' }).then(res => {
        if (res.token) {
          dispatch(userActions.getUserInfo())
        }
      })
    }
  }, [isFocused])

  const onGoPage = item => {
    if (item.url) {
      navigation.navigate(item.url)
    }
  }

  const _goLogin = () => {
    navigation.navigate('Login')
  }

  return (
    <>
      <StatusBar
        barStyle="dark-content"
        backgroundColor="#cf3037"
        translucent={false}
      />
      <View style={styles.wrap}>
        <ScrollView
          style={styles.container}
          contentInsetAdjustmentBehavior="automatic"
        >
          <View style={styles.topBg} />

          <View style={styles.top}>
            {userInfo.id ? (
              <View style={styles.mainBox}>
                <TouchableOpacity onPress={() => onGoPage({ url: 'EditInfo' })}>
                  <View style={styles.mainTop}>
                    <View style={styles.header}>
                      {userInfo.headImg ? (
                        <Image
                          source={{
                            uri: userInfo.headImg
                            // uri: 'https://chuanti-bucket.oss-cn-chengdu.aliyuncs.com/img/672885fe-d1f9-4598-90b3-903831f7e1eb.jpeg'
                          }}
                          style={styles.headerImg}
                        />
                      ) : (
                        <Image
                          source={defaultHeader}
                          style={styles.headerImg}
                        />
                      )}
                    </View>
                    <View style={styles.nameBox}>
                      <Text style={styles.name} numberOfLines={1}>
                        {userInfo.nickName}
                      </Text>
                    </View>
                    <View style={styles.iconBox}>
                      <Image source={rightIcon} style={styles.rightIcon} />
                    </View>
                  </View>
                </TouchableOpacity>
                <View style={styles.mainBottom}>
                  <TouchableOpacity
                    onPress={() => onGoPage({ url: 'Collection' })}
                  >
                    <View style={styles.tabNav}>
                      <Image style={styles.navIcon} source={iconCollect} />
                      <View style={styles.navTitle}>
                        <Text style={styles.navText1}>收藏</Text>
                      </View>
                    </View>
                  </TouchableOpacity>
                  <TouchableOpacity
                    onPress={() => onGoPage({ url: 'History' })}
                  >
                    <View style={styles.tabNav}>
                      <Image style={styles.navIcon} source={iconHistory} />
                      <View style={styles.navTitle}>
                        <Text style={styles.navText}>历史记录</Text>
                      </View>
                    </View>
                  </TouchableOpacity>
                  <TouchableOpacity
                    onPress={() => onGoPage({ url: 'mineActivity' })}
                  >
                    <View style={styles.tabNav}>
                      <Image style={styles.navIcon} source={iconActivity} />
                      <View style={styles.navTitle}>
                        <Text style={styles.navText}>我的赛事</Text>
                      </View>
                    </View>
                  </TouchableOpacity>
                  <TouchableOpacity
                    onPress={() => onGoPage({ url: 'mineContact' })}
                  >
                    <View style={styles.tabNav}>
                      <Image style={styles.navIcon} source={iconContact} />
                      <View style={styles.navTitle}>
                        <Text style={styles.navText}>通讯录</Text>
                      </View>
                    </View>
                  </TouchableOpacity>

                </View>
              </View>
            ) : (
              <View style={[styles.mainBox, styles.unLogin]}>
                <View style={styles.unLoginTips}>
                  <Text style={styles.unLoginText}>您还未登录账号哦～</Text>
                </View>
                <Button
                  rounded
                  block
                  style={styles.loginBtn}
                  onPress={_goLogin}
                >
                  <Text style={styles.btnText}>去登录</Text>
                </Button>

              </View>
            )}
          </View>
          {userInfo.id ? (
            <View style={styles.menuBox}>
              {navList.map((item, index) => {
                return (
                  <ListItem
                    key={index}
                    title={item.name}
                    contentContainerStyle={styles.listContentContainer}
                    onPress={() => onGoPage(item)}
                    rightIcon={
                      <Image source={rightIcon} style={styles.rightIcon} />
                    }
                  />
                )
              })}
            </View>
          ) : null}
          {userInfo.id ? (
            <View style={styles.menuBox}>
              {nav2List.map((item, index) => {
                return (
                  <ListItem
                    key={index}
                    title={item.name}
                    onPress={() => onGoPage(item)}
                    contentContainerStyle={styles.listContentContainer}
                    bottomDivider={!(index === nav2List.length - 1)}
                    rightIcon={
                      <Image source={rightIcon} style={styles.rightIcon} />
                    }
                  />
                )
              })}
            </View>
          ) : null}
          {userInfo.id ? (
            <View style={styles.menuBox}>
              {nav3List.map((item, index) => {
                return (
                  <ListItem
                    key={index}
                    title={item.name}
                    onPress={() => onGoPage(item)}
                    contentContainerStyle={styles.listContentContainer}
                    bottomDivider={!(index === nav3List.length - 1)}
                    rightIcon={
                      <Image source={rightIcon} style={styles.rightIcon} />
                    }
                  />
                )
              })}
            </View>
          ) : null}
        </ScrollView>
      </View>
    </>
  )
}

export default UserCenter
